<template>
	<view>
		<uni-nav-bar title="接龙" left-icon="back" background-color="#EFF4FA" :fixed="true" :statusBar="true"
			:border="false" @clickLeft="$tab.back()"></uni-nav-bar>
		<div class="px-32">
			<div class="mt-36 flex items-center" v-if="msgId == null || detail != null">
				<image :src="msgId == null ? userInfo.avatar : detail.sendUserInfo.avatar" class="avatar round" mode="">
				</image>
				<div class="ml-16">
					由{{msgId == null ? userInfo.nickName : detail.sendUserInfo.nickName}}发起接龙，参与接龙目前共{{msgId == null ? 0 : form.personNum}}人
				</div>
			</div>
			<div class="line mt-28"></div>
			<div class="" v-if="msgId == null || (msgId != null && form.title)">
				<div class="mt-48">
					<div class="">
						#接龙
					</div>
					<u--textarea v-model="form.title" border="none" :disabled="msgId != null"></u--textarea>
				</div>
				<div class="line mt-28"></div>
			</div>

			<div class="mt-40">
				<div class="flex items-center">
					<div class="num">例</div>
					<input type="text" v-model="form.example" :disabled="msgId != null" placeholder="可写接龙格式"
						class="num-content px-24 ml-24 text-28" />
				</div>
				<div class="flex items-center mt-24" v-for="(item,index) in form.list" :key="index">
					<div class="num">{{item.num}}</div>
					<input type="text" v-model="item.content" :disabled="item.userId != userInfo.userId"
						class="num-content px-24 ml-24 text-28" />
				</div>

				<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/icon_tianjia@3x.png" class="add mt-24"
					mode="" @click="handleAdd"></image>
			</div>

			<div class="" v-if="msgId == null || (msgId != null && form.remark)">
				<div class="line mt-28"></div>
				<u--textarea v-model="form.remark" border="none" placeholder="可以填写补充内容"
					:disabled="msgId != null"></u--textarea>
			</div>
		</div>

		<div class="" v-if="flag"></div>

		<bottom-btn txt="发送" @click="confirm()"></bottom-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupId: null,
				userInfo: this.$store.getters.userInfo,
				form: {
					title: "",
					example: "",
					list: [{
						num: 1,
						content: this.$store.getters.userInfo.nickName,
						userId: this.$store.getters.userInfo.userId,
						isNew: true
					}],
					groupId: null,
					remark: ""
				},

				msgId: null,
				detail: null,
				flag: false
			};
		},
		onLoad(e) {
			this.form.groupId = e.groupId

			if (e.msgId) {
				this.msgId = e.msgId
				this.getData()
			}
		},
		methods: {
			async getData() {
				const res = await this.$Api.chat.chatMsgDetail(this.msgId)
				console.log('接龙内容查询', JSON.parse(res.data.jielongRemark))
				this.detail = res.data
				this.form = JSON.parse(res.data.jielongRemark)
				this.form.list = this.form.textVos.map(item => {
					return {
						content: item.text,
						num: item.orderBy,
						userId: item.userId,
						isNew: false
					}
				})
				console.log(this.form)
			},
			handleAdd() {
				this.form.list.push({
					num: this.form.list.length + 1,
					content: this.$store.getters.userInfo.nickName,
					userId: this.$store.getters.userInfo.userId,
					isNew: true
				})
				console.log(this.form.list)
				this.flag = !this.flag
			},
			async confirm() {
				let num = 0
				this.form.list.forEach(item => {
					if (item.content != "") {
						num++
					}
				})

				if (num == 0) {
					this.$modal.msg('请输入接龙内容!')
					return
				}

				let form = {
					...this.form
				}

				form.insertTextVos = this.form.list.filter(item => {
					return item.isNew
				}).map(item=>{
					return {
						text:item.content
					}
				})
				
				form.updateTextVos = this.form.list.filter(item => {
					return !item.isNew
				}).map(item=>{
					return {
						orderBy:item.num,
						text:item.content
					}
				})

				if (this.msgId != null) {
					form.msgId = this.msgId
				}

				const res = await this.$Api.chat.sendJieLong(form)
				console.log('接龙提交', res)
				this.$tab.back()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}

	.avatar {
		width: 52rpx;
		height: 52rpx;
	}

	.line {
		height: 2rpx;
		background-color: #F4F4F4;
	}

	.num {
		width: 64rpx;
		height: 64rpx;
		background: #F3F3F3;
		line-height: 64rpx;
		text-align: center;
		color: #9E9E9E;
		border-radius: 50%;
	}

	.num-content {
		width: 598rpx;
		height: 64rpx;
		background: #F3F3F3;
		border-radius: 4rpx;
		line-height: 64rpx;
	}

	.add {
		width: 64rpx;
		height: 64rpx;
	}
</style>